<template>
  <div class="filter_wrapper">
    <div class="filter isFixed">
      <ul>
        <li :class="{active: sortBy == 'sort'}" @click="handleDropOpen('sort')">
          <span>{{sortByTitle}}</span>
          <span class="arrow"><i class="iconfont">&#xe771;</i></span>
        </li>
        <li data="5" :class="{active: sortByType == 5}" @click="sortList($event)">
          <span>距离最近</span>
        </li>
        <li data="6" :class="{active: sortByType == 6}" @click="sortList($event)">
          <span>销量最高</span>
        </li>
        <li :class="{active: sortBy == 'filter'}" @click="handleDropOpen('filter')">
          <span>筛选</span>
          <span><i class="iconfont">&#xe7bb;</i></span>
        </li>
      </ul>
    </div>
    <transition name="showlist">
      <div class="filter_drop filter_sort" v-show="sortBy == 'sort'">
        <ul @click="sortList($event)">
          <li data="4" :class="{active: sortByType == 4}">
            <span>综合排序</span>
            <span class="iconfont">&#xe631;</span>
          </li>
          <li data="3" :class="{active: sortByType == 3}">
            <span>好评优先</span>
            <span class="iconfont">&#xe631;</span>
          </li>
          <li data="1" :class="{active: sortByType == 1}">
            <span>起送价最低</span>
            <span class="iconfont">&#xe631;</span>
          </li>
          <li data="2" :class="{active: sortByType == 2}">
            <span>配送最快</span>
            <span class="iconfont">&#xe631;</span>
          </li>
          <li data="6" :class="{active: sortByType == 6}">
            <span>销量最高</span>
            <span class="iconfont">&#xe631;</span>
          </li>
          <li data="5" :class="{active: sortByType == 5}">
            <span>距离最近</span>
            <span class="iconfont">&#xe631;</span>
          </li>
        </ul>
      </div>
    </transition>
    <transition name="showlist">
      <div class="filter_drop" v-show="sortBy == 'filter'">
        <div class="more_filter">
          <dl>
            <dt>配送方式</dt>
            <dd>
              <div v-for="(item, index) in delivery" :key="index"
                :class="{active: delivery_mode == item.id}"
                @click="selectDeliveryMode(item.id)"
              >
                <img class="pic" src="https://cube.elemecdn.com/b/9b/45d2f6ff0dbeef3a78ef0e4e90abapng.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed">
                <span>{{item.text}}</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt>商家服务 (可多选)</dt>
            <dd>
              <div v-for="(item, index) in activity" :key="index"
                :class="{active: support_ids[index].status}"
                @click="selectSupportIds(index, item.id)"
              >
                <span class="icon" :style="{color: '#' + item.icon_color, borderColor: '#' + item.icon_color}">{{item.icon_name}}</span>
                <span>{{item.name}}</span>
              </div>
            </dd>
          </dl>
        </div>
        <div class="more_filter_button">
          <span class="clear" :class="{clickable: filterNum > 0}" @click="clearSelect">清空</span>
          <span class="confirm" @click="confirmSelectFun">确定</span>
        </div>
      </div>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="open" @click="handleDropClose"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'foodFilter',
  data () {
    return {
      sortBy: '', // 筛选的条件
      open: false
    }
  },
  props: ['sortByType', 'sortByTitle', 'delivery', 'activity', 'delivery_mode', 'support_ids', 'filterNum'],
  methods: {
    // 点击顶部4个筛选选项，展示不同的列表
    handleDropOpen (type) {
      if (this.sortBy !== type) {
        this.sortBy = type
        this.open = true
      } else {
        // 再次点击相同选项时收回列表
        this.sortBy = ''
        this.open = false
      }
    },
    // 点击遮罩，全关闭
    handleDropClose () {
      this.sortBy = ''
      this.open = false
    },
    sortList (event) {
      this.$emit('select', event)
      this.sortBy = ''
      this.open = false
    },
    selectDeliveryMode (id) {
      this.$emit('selectD', id)
    },
    selectSupportIds (index, id) {
      this.$emit('selectS', index, id)
    },
    clearSelect () {
      this.$emit('clear')
    },
    confirmSelectFun () {
      this.$emit('confirm')
      this.sortBy = ''
      this.open = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .filter_wrapper
    position: fixed
    top: .88rem
    width: 100%
    z-index: 99
    .filter
      padding: .2rem 0
      &.isFixed
        position: fixed
        top: .88rem
        left: 0
        right: 0
        z-index: 999
        background: #fff
        box-shadow: 0 0 5px #ddd
    .filter ul
      display: flex
      flex-direction: row
      li
        width: 27%
        display: flex
        flex-direction: row
        align-items: center
        justify-content: center
        font-size: .28rem
        text-decoration: none
        .arrow
          display: inline-block
          font-size: 0.35rem
          transform: scale(0.4)
          i
            display: block
            transition: all 0.3s
        &.active
          color: #3190e8
          font-weight: bold
        &.active i
          transform: rotate(180deg)
      li:nth-child(4)
        width: 19%
    .filter_drop
      position: absolute
      top: .78rem
      left: 0
      width: 100%
      height: auto
      z-index: 99
      font-size: .28rem
      background: #fff
      .more_filter
        padding: 0 .2rem
        dl
          margin: .2rem 0
          dt
            font-size: .24rem
            margin-bottom: .2rem
          dd
            display: flex
            flex-wrap: wrap
            div
              display: flex
              justify-content: center
              align-items: center
              line-height: .7rem
              flex: 0 0 31.33%
              margin: .08rem 1%
              background: #fafafa
              &.active
                font-weight: 700
                color: #3190e8
                background-color: #edf5ff
              img
                width: .26rem
                height: .26rem
                margin-right: .06rem
              .icon
                width: 0.36rem
                height: 0.36rem
                line-height: 0.36rem
                font-size: 0.24rem
                border: 0.01rem solid #e4e4e4
                border-radius: 0.08rem
                margin-right: 0.1rem
                text-align: center
      .more_filter_button
        text-align: center
        line-height: 1rem
        display: flex
        justify-content: space-between
        box-shadow: 0 -1px 3px #eee
        span
          flex: 1
        span.clear
          background-color: #fff
          color: #ddd
        span.clickable
          color: #666
        span.confirm
          color: #fff
          background-color: #00d762
          border: .01rem solid #00d762
    .filter_sort
      padding: .2rem 0
    .filter_sort li
      line-height: .8rem
      padding: 0 .4rem
      display: flex
      justify-content: space-between
      align-items: center
      span.iconfont
        display: none
      &.active span
        color: #3190e8
        font-weight: bold
      &.active .iconfont
        display: block
    .showlist-enter-active,
    .showlist-leave-active
      transition: all 0.3s
      transform: translateY(0)
    .showlist-enter,
    .showlist-leave-active
      opacity: 0
      transform: translateY(-100%)
    .mask
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      z-index: 98
      background: rgba(0, 0, 0, .5)
      backdrop-filter: blur(.1rem)
    .showcover-enter-active,
    .showcover-leave-active
      transition: opacity 0.3s
    .showcover-enter,
    .showcover-leave-active
      opacity: 0
</style>
